<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="J-input" placeholder="搜素课程">

    <ul class="list">
        <span>-暂无内容-</span>
    </ul>

    <div id="J-data" style="display: none;">
        [{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
        {"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
        {"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
        {"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]
    </div>

    <script type="text/javascript">
        ; (function (doc) {
            var data = JSON.parse(doc.getElementById('J-data').innerHTML),
                oSearchInput = doc.getElementById('J-input'),
                oList = doc.getElementsByClassName('list')[0];

            // 初始化函数
            function init() {
                bindEvent();
            }

            // 绑定事件函数
            function bindEvent() {
                oSearchInput.addEventListener('input', searchCourse, false);
            }

            function searchCourse() {
                var inputVal = this.value,
                    len = inputVal.length;

                // 判断搜索框内是否有输入
                if (len > 0) {
                    // 判断是否有过滤数据
                    if (searchData(data, inputVal).length > 0) {
                        oList.innerHTML = renderList(searchData(data, inputVal));
                    } else {
                        oList.innerHTML = '<span>-暂无内容-</span>'
                    }
                } else {
                    oList.innerHTML = '<span>-暂无内容-</span>'
                }

            }

            // 过滤数据
            function searchData(data, keyword) {
                return data.reduce(function (initval, elem) {
                    // 判断elem.course中是否有keyword值，如果没有返回-1，有则返回对应的下标
                    var isState = elem.course.indexOf(keyword);
                    if (isState !== -1) {
                        initval.push(elem);
                    }
                    return initval;
                }, []);
            }

            // 将数据渲染到页面
            function renderList(searchData) {
                var list = '';

                if (searchData.length <= 0) {
                    return false;
                }

                searchData.forEach(function (elem) {
                    list += '<li>' + elem.course + '</ li></ br>';
                });

                return list;
            }

            init();

        })(document);
    </script>
</body>

</html>